<template>
  <div>
    detail组件
    <!-- 
        <p>id: {{$route.params.id}}</p>
        <p>title: {{$route.params.title}}</p>
        <p>content:{{$route.params.content}}</p> 
    -->

    <p>id: {{id}}</p>
    <p>title: {{title}}</p>
    <!-- <p>content:{{content}}</p> -->
    <hr>
    <p>xx:{{xx}}</p>
    <p>yy:{{yy}}</p>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  // 方式一：对象式
  //   props:['xx','yy'],
  // 方式二：boolean
  props: ['id', 'title','xx','yy'],
  computed: {
    // id() {
    //   return this.$route.query.id
    // },
    // title() {
    //   return this.$route.query.title
    // },
    // content() {
    //   return this.$route.query.content
    // },
  },
  mounted() {
    console.log('detail this.$route: ', this.$route)
  },
}
</script>

<style>
</style>